import React from 'react';
import classnames from 'classnames';


export type ButtonSize = 'lg' | 'sm' | 'df' 


export type ButtonType = 'primary' | 'default' | 'danger' | 'link'

interface BaseButtonProps {
    /**
     * the size of this button
     */
    size?: ButtonSize;
    /**
     * the type of this button
     */
    btnType?: ButtonType;
    /**
     * whether the button can be clicked
     */
    disabled?: boolean;
    /**
     * button name
     */
    children: React.ReactNode;
    /**
     * href url
     */
    href?: string;
    /**
     * classes
     */
    className?: string;
}

// 添加button和a的所有原生属性
type NativeButtonProps = BaseButtonProps & React.ButtonHTMLAttributes<HTMLElement>;
type AnchorButtonProps = BaseButtonProps & React.AnchorHTMLAttributes<HTMLElement>;
export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>;


export const Button: React.FC<ButtonProps> = (
    {
        btnType = "default", className, disabled,
        size = "df",
        children, href, ...restProps
    }) => {
    // btn, btn-lg btn-primary
    const classes = classnames('wave-btn', className, {
        [`wave-btn-${btnType}`]: btnType,
        [`wave-btn-${size}`]: size,
        'disabled': (btnType === "link") && disabled
    });
    if (btnType === "link" && href) {
        return (
            <a className={classes} href={href} {...restProps}>
                {children}
            </a>
        )
    } else {
        return (
            <button className={classes}
                disabled={disabled} {...restProps}
            >{children}</button>
        )
    }
}
